
#y-chat-header {
    flex-shrink: 0;
    min-height: 8.281/10rem;
    line-height: 8.281/10rem;
    user-select: none;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);

    .color-header {
        transform: translateY(-2/10rem);
        background-color: transparent;

        .nav-item {
            color: #ffffff;

            &.active {
                color: #f23451;
                transform: translateY(-.2/10rem);
            }
        }
    }

}

.test-light {
    //background-image: linear-gradient(40deg, #83d6ff 0%, #d12c34 100%);
    background-image: @r-headerBackground;
    background-size: 4000% 100%;
    bakcground-position: 0 0;
    animation-name: headerColorMove;
    animation-fill-mode: both;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.header-bar {
    height: 14.656/10rem;
    color: #ffffff;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-icon {
        flex: none;
        width: 35/6.5/10rem;

        margin-left: 4.5/10rem;
        margin-right: 2.0313/10rem;
    }

    .header-bar-title {
        flex: 1;
        height: 100%;
        text-align: center;
        justify-self: center;
        align-items: center;
        //padding: 0 4/10rem;
        display: flex;
        font-size: 4.147/10rem;

        .header-center {
            flex: 1;
            text-align: center;
            font-size: 5/10rem;
            height: 100%;
            line-height: 1;
        }

        .logo-img {
            height: 100%;
            //width: 54.5/10rem;
            text-align: center;
            display: inline-block;
        }

        .header-icon {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .right-icon {
            padding-right: 4/10rem;
        }

        .left-icon {
            padding-left: 4/10rem;
        }
    }
}


.nav-bar {
    height: 9.520179372/10rem;
    display: flex;
    justify-content: center;
    overflow: visible;
    align-items: center;
    background-color: #f5f5f5;
    z-index: 1;

    .nav-item {
        flex: auto;
        font-size: 3.9147/10rem;
        text-align: center;
        cursor: pointer;
        transition: all 180ms 100ms ease-in-out;
        color: #777;
        transform: scale(0.9);

        &.active {
            //transform: translateY(1/10rem);
            color: #f23451;
        }
    }
}

